<script setup lang="ts">
import { ref } from 'vue'
interface accListType {
    name: string;
    id: number;
}
const accList = ref<accListType[]>([])
</script>

<template>
    <view class="page">
        <view class="tips">绑定平台账号后，可在首页查看来自用户评论等消息</view>
        <!-- <view class="kong" v-if="!accList.length">
            <image class="kong-img" src=""/>
            <text class="kong-text">暂无账号</text>
        </view> -->
        <view class="plat">
            <text class="plat-title">抖音</text>
            <view class="plat-item">
                <view class="plat-item-left">
                    <image class="plat-item-image" src=""/>
                    <text class="plat-item-name">抖音名称</text>
                </view>
                <view class="plat-item-right">解除授权</view>
            </view>
        </view>
        <view>

        </view>
        <view class="bottom">
            <button class="add">添加账号</button>
            <view class="topup-bottom"></view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .page{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgb(246,248,251);
        .tips{
            width: 100%;
            height: 74rpx;
            text-align: center;
            line-height: 74rpx;
            font-size: 28rpx;
            color: rgb(255,161,0);
            background-color: rgb(255,205,39,0.2);
        }
        .plat{
            margin: 32rpx 24rpx;
            .plat-title{
                font-size: 28rpx;
                color: rgb(144,147,153);
                margin-bottom: 24rpx;
                display: block;
            }
            .plat-item{
                width: 100%;
                height: 128rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 32rpx;
                background-color: #fff;
                border-radius: 16rpx;
                margin-bottom: 24rpx;

                .plat-item-left{
                    display: flex;
                    align-items: center;
                    .plat-item-image{
                        width: 64rpx;
                        height: 64rpx;
                        margin-right: 16rpx;
                    }
                    .plat-item-name{
                        font-size: 32rpx;
                        color: rgb(48,49,51);
                    }
                }
                .plat-item-right{
                    width: 160rpx;
                    height: 48rpx;
                    background-color: rgb(246,248,251);
                    text-align: center;
                    line-height: 48rpx;
                    color: rgb(144,147,153);
                    font-size: 28rpx;
                    border-radius: 168rpx;
                }
            }
        }
        .kong{
            width: 610rpx;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .kong-img{
                width: 610rpx;
                height: 368rpx;
            }
            .kong-text{
                font-size: 24rpx;
                color: rgb(144,147,153);
            }
        }
        .bottom{
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            padding-top: 10rpx;
            .add{
                width: 686rpx;
                height: 88rpx;
                background-color: rgb(255,205,39);
                border-radius: 596rpx;
                font-size: 32rpx;
                color: rgb(48,49,51);
                text-align: center;
                line-height: 88rpx;
                margin: 0 auto;
            }
            .topup-bottom{
                    width: 100%;
                    height: 68rpx;
                }
        }
    }
</style>